<template>
  <view class="page">
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="loginClick"
        mode=""
      />
      设置支付密码
    </view>
    <view class="shuru">
      <view class="row">
        <view class="let">手机号码</view>
        <input
          type="number"
          value=""
          class="phone"
          disabled="true"
          v-model="mobile"
          maxlength="11"
          placeholder="请输入您的手机号码"
        />
      </view>
      <view class="row">
        <view class="let">手机验证码</view>
        <input
          type="number"
          v-model="captcha"
          placeholder="请输入验证码"
          value=""
          class="phone"
        />
        <view class="authBtn">
          <text v-if="verifyshow" @click="authClcik">获取验证码</text>
          <text v-else>{{ second }}s</text>
        </view>
      </view>
      <view class="row">
        <view class="let">支付密码</view>
        <input
          type="number"
          password
          class="phone"
          v-model="payPassword"
          maxlength="6"
          placeholder="请输入支付密码"
          @input="onKeyInputOne"
        />
      </view>
      <view class="row">
        <view class="let">支付密码</view>
        <input
          type="number"
          class="phone"
          password
          v-model="Confirmpassword"
          maxlength="6"
          placeholder="请确认支付密码"
          @input="onKeyInputTwo"
        />
      </view>
    </view>
    <button type="default" class="btn" @click="confirm">确认</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verifyshow: true,
      mobile: "", // 手机号码
      captcha: "", // 短信验证码
      payPassword: "", // 新密码
      Confirmpassword: "", // 确认密码
      token: "",
      second: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
    this.mobile = uni.getStorageSync("userInfo").mobile;
  },
  methods: {
    // 返回
    loginClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    onKeyInputOne(event) {
      let i = event.target.value;
      let num = i.charAt(i.length - 1);
      var reg = new RegExp("^[0-9]*$");
      if (!reg.test(num)) {
        setTimeout(() => {
          this.payPassword = i.slice(0, -1);
        }, 0);
        return i.slice(0, -1);
      } else {
        setTimeout(() => {
          this.payPassword = i;
        }, 0);
        return i;
      }
    },
    onKeyInputTwo(event) {
      let i = event.target.value;
      let num = i.charAt(i.length - 1);
      var reg = new RegExp("^[0-9]*$");
      if (!reg.test(num)) {
        setTimeout(() => {
          this.Confirmpassword = i.slice(0, -1);
        }, 0);
        return i.slice(0, -1);
      } else {
        setTimeout(() => {
          this.Confirmpassword = i;
        }, 0);
        return i;
      }
    },
    //获取验证码
    async authClcik() {
      let mobile = this.mobile;
      let that = this;
      if (!RegExp(/^1[34578]\d{9}$/).test(that.mobile)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "正在发送",
        });
        that.second = 60;

        const { data } = await that.$myRequest({
          url: "sms/get_captcha",
          method: "POST",
          data: {
            mobile: mobile,
            event: "changePayPwd",
          },
        });

        if (data.code == 1) {
          uni.hideLoading();
          that.timedown(that.second);
        } else {
          uni.hideLoading();
          uni.showToast({
            icon: "none",
            title: data.msg,
          });
        }
      }
    },
    // 验证码倒计时
    timedown(num) {
      let that = this;
      if (num == 0) {
        that.verifyshow = true;
      } else {
        that.verifyshow = false;
        setTimeout(() => {
          that.second--;
          that.timedown(that.second);
        }, 1000);
      }
    },
    // 确认
    async confirm() {
      if (this.mobile == "") {
        uni.showToast({
          title: "手机号码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.captcha == "") {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.payPassword == "") {
        uni.showToast({
          title: "请设置新的支付密码",
          icon: "none",
        });
        return;
      }
      if (this.payPassword !== this.Confirmpassword) {
        uni.showToast({
          title: "两次密码不一致",
          icon: "none",
        });
        return;
      }

      const res = await this.$myRequest({
        url: "user/setPayPassword",
        method: "POST",
        header: {
          token: this.token,
        },
        data: {
          mobile: this.mobile,
          captcha: this.captcha,
          payPassword: this.payPassword,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: "设置成功",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "../balance/balance",
          });
        }, 1500);
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35rpx;
  color: #333333;
  padding-top: 80rpx;
  font-weight: 600;
  box-sizing: border-box;
  .close {
    position: absolute;
    left: 60rpx;
  }
}
.shuru {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin: 110rpx 0;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 30rpx;
  .phone {
    flex: 1;
    height: 94rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
    box-sizing: border-box;
    input {
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
    }
  }
  .row {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    position: relative;
    .let {
      width: 128rpx;
      margin-right: 45rpx;
      white-space: nowrap;
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
    }
    .authBtn {
      position: absolute;
      font-size: 26rpx;
      font-weight: 400;
      color: #c52b2e;
      right: 0;
    }
  }
  .row:last-child {
    border-bottom: none;
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350rpx;
  height: 74rpx;
  background-color: #c52b2e;
  border-radius: 37rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  margin: 100rpx auto;
}
</style>
